<script lang="ts">
export default {
  name: 'Goods'
}
</script>

<script setup lang="ts">
import type { CartItem, GoodsDetail } from '@/types'
import { http } from '@/utils/request'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import GoodsHot from './components/GoodsHot.vue'
import { useCartStore } from '@/store'
import type { SkuEmit } from '@/components/XtxUI/Sku/index.vue'
import { message } from '@/components/XtxUI'

const route = useRoute()
const goods = ref<GoodsDetail>()
onMounted(async () => {
  const res = await http<GoodsDetail>('GET', '/goods', { id: route.params.id })
  res.data.result.categories.sort((a, b) => a.layer - b.layer)
  goods.value = res.data.result
})

const skuInfo = ref<SkuEmit>()
const changeSkuInfo = (value: SkuEmit) => {
  // 未选择完整商品规则，会返回{}空对象
  skuInfo.value = value
}
const count = ref(1)
const cartStore = useCartStore()
const { addCart } = cartStore
const handleAddCart = () => {
  if (!skuInfo.value?.skuId) {
    return message({ type: 'warn', text: '请选择完整商品规则' })
  }
  if (!goods.value) return
  const cartItem = {
    // 第一部分：商品详情中有的
    id: goods.value.id, // 商品id
    name: goods.value.name, // 商品名称
    picture: goods.value.mainPictures[0], // 图片
    // 第二部分：商品详情中没有的，通过响应式数据收集
    count: count.value, // 商品数量
    skuId: skuInfo.value.skuId, // skuId
    price: skuInfo.value.oldPrice, // 商品原来的价格
    nowPrice: skuInfo.value.price, // 商品现在的价格
    stock: skuInfo.value.inventory, // 商品库存
    attrsText: skuInfo.value.specsText, // 商品规格文本
    // 第三部分：设置默认值即可
    selected: true, // 默认商品选中
    isEffective: true // 默认商品有效
  } as CartItem
  addCart(cartItem)
}
</script>

<template>
  <div class="xtx-goods-page">
    <div class="container">
      <!-- 面包屑 -->
      <XtxBread>
        <template v-if="goods">
          <XtxBreadItem to="/">首页</XtxBreadItem>
          <template v-for="item in goods.categories" :key="item.id">
            <XtxBreadItem v-if="item.layer === 1" :to="`/category/${item.id}`">{{
              item.name
            }}</XtxBreadItem>
            <XtxBreadItem v-else>{{ item.name }}</XtxBreadItem>
          </template>
          <XtxBreadItem>{{ goods.name }}</XtxBreadItem>
        </template>
      </XtxBread>
      <!-- 商品信息 -->
      <div v-if="goods" class="goods-info">
        <div class="media">
          <!-- 图片预览区 -->
          <div class="goods-image">
            <XtxImageView :image-list="goods.mainPictures" />
          </div>
          <!-- 统计数量，后台没返回数据，不做渲染 -->
          <ul class="goods-sales">
            <li>
              <p>销量人气</p>
              <p>100+</p>
              <p><i class="iconfont icon-task-filling"></i>销量人气</p>
            </li>
            <li>
              <p>商品评价</p>
              <p>200+</p>
              <p><i class="iconfont icon-comment-filling"></i>查看评价</p>
            </li>
            <li>
              <p>收藏人气</p>
              <p>80+</p>
              <p><i class="iconfont icon-favorite-filling"></i>收藏商品</p>
            </li>
            <li>
              <p>品牌信息</p>
              <p>90+</p>
              <p><i class="iconfont icon-dynamic-filling"></i>品牌主页</p>
            </li>
          </ul>
        </div>
        <!-- 商品信息区 -->
        <div class="spec">
          <!-- 商品主要信息 -->
          <div class="goods-main">
            <p class="g-name">{{ goods.name }}</p>
            <p class="g-desc">{{ goods.desc }}</p>
            <!-- <p class="g-desc">这是选中的商品规格</p> -->
            <p class="g-price">
              <span>{{ goods.price }}</span>
              <span>{{ goods.oldPrice }}</span>
            </p>
            <div class="g-service">
              <dl>
                <dt>促销</dt>
                <dd>12月好物放送，App领券购买直降120元</dd>
              </dl>
              <dl>
                <dt>配送</dt>
                <dd>至</dd>
                <dd>
                  <XtxCity />
                </dd>
              </dl>
              <dl>
                <dt>服务</dt>
                <dd>
                  <span>无忧退货</span>
                  <span>快速退款</span>
                  <span>免费包邮</span>
                  <a href="javascript:;">了解详情</a>
                </dd>
              </dl>
            </div>
          </div>
          <!-- 规格 -->
          <XtxSku :goods="goods" @change="changeSkuInfo" />
          <!-- 数量选择 -->
          <XtxCount v-model="count" isLabel></XtxCount>
          <!-- 加入购物车按钮 -->
          <XtxButton type="primary" style="margin-top: 20px" @click="handleAddCart"
            >加入购物车</XtxButton
          >
        </div>
      </div>
      <div v-else class="goods-info xtx-loading"></div>
      <div class="goods-footer">
        <div class="goods-article">
          <div v-if="goods" class="goods-tabs">
            <nav>
              <a class="active">商品详情</a>
              <a>商品评价<span>(0)</span></a>
            </nav>
            <!-- 商品详情 -->
            <div class="goods-detail">
              <!-- 属性 -->
              <ul class="attrs">
                <li v-for="item in goods.details.properties" :key="item.value">
                  <span class="dt">{{ item.name }}</span>
                  <span class="dd">{{ item.value }}</span>
                </li>
              </ul>
              <!-- 图片 -->
              <img v-for="item in goods.details.pictures" :key="item" :src="item" alt="" />
            </div>
          </div>
          <div v-else class="goods-tabs xtx-loading"></div>
          <!-- 注意事项 -->
          <div class="goods-warn">
            <h3>注意事项</h3>
            <p class="tit">• 购买运费如何收取？</p>
            <p>
              单笔订单金额(不含运费)满88元免邮费；不满88元，每单收取10元运费。（港澳台地区需满500元免邮费；不满500元，每单收取30元运费）
            </p>
            <br />
            <p class="tit">• 使用什么快递发货？</p>
            <p>默认使用顺丰快递发货（个别商品使用其他快递）</p>
            <p>配送范围覆盖全国大部分地区（港澳台地区除外）</p>
            <br />
            <p class="tit">• 如何申请退货？</p>
            <p>
              1.自收到商品之日起30日内，顾客可申请无忧退货，退款将原路返还，不同的银行处理时间不同，预计1-5个工作日到账；
            </p>
            <p>2.内裤和食品等特殊商品无质量问题不支持退货；</p>
            <p>
              3.退货流程：确认收货-申请退货-客服审核通过-用户寄回商品-仓库签收验货-退款审核-退款完成；
            </p>
            <p>
              4.因小兔鲜儿产生的退货，如质量问题，退货邮费由小兔鲜儿承担，退款完成后会以现金券的形式报销。因客户个人原因产生的退货，购买和寄回运费由客户个人承担。
            </p>
          </div>
        </div>
        <!-- 24热榜+专题推荐 -->
        <div v-if="goods" class="goods-aside">
          <GoodsHot :type="1" />
          <GoodsHot :type="2" />
          <GoodsHot :type="3" />
        </div>
        <div v-else class="goods-aside xtx-loading"></div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
// .container {
//   margin-top: 20px;
// }

// 商品信息
.goods-info {
  display: flex;
  min-height: 600px;
  background: #fff;

  &.xtx-loading {
    background: #fff url(@/assets/images/loading.gif) no-repeat center;
  }

  .media {
    padding: 30px 50px;
    width: 580px;
    height: 600px;
  }

  .spec {
    flex: 1;
    padding: 30px 30px 30px 0;
  }
}

// 图片预览区
.goods-image {
  width: 480px;
  height: 400px;
  background-color: #eee;
}

// 统计数量
.goods-sales {
  display: flex;
  align-items: center;
  text-align: center;
  width: 400px;
  height: 140px;

  li {
    flex: 1;
    position: relative;

    ~ li::after {
      content: '';
      position: absolute;
      top: 10px;
      left: 0;
      height: 60px;
      border-left: 1px solid #e4e4e4;
    }

    p {
      &:first-child {
        color: #999;
      }

      &:nth-child(2) {
        margin-top: 10px;
        color: @priceColor;
      }

      &:last-child {
        margin-top: 10px;
        color: #666;

        i {
          margin-right: 2px;
          font-size: 14px;
          color: @xtxColor;
        }

        &:hover {
          color: @xtxColor;
          cursor: pointer;
        }
      }
    }
  }
}

// 商品信息区
.spec {
  .g-name {
    font-size: 22px;
  }

  .g-desc {
    margin-top: 10px;
    color: #999;
  }

  .g-price {
    margin-top: 10px;

    span {
      &::before {
        content: '¥';
        font-size: 14px;
      }

      &:first-child {
        margin-right: 10px;
        font-size: 22px;
        color: @priceColor;
      }

      &:last-child {
        font-size: 16px;
        color: #999;
        text-decoration: line-through;
      }
    }
  }

  .g-service {
    margin-top: 10px;
    padding: 20px 10px 0 10px;
    width: 500px;
    background: #f5f5f5;

    dl {
      display: flex;
      align-items: center;
      padding-bottom: 20px;

      dt {
        width: 50px;
        color: #999;
      }

      dd {
        color: #666;

        &:last-child {
          span {
            margin-right: 10px;

            &::before {
              content: '•';
              margin-right: 2px;
              color: @xtxColor;
            }
          }

          a {
            color: @xtxColor;
          }
        }
      }
    }
  }
}

.goods-footer {
  display: flex;
  margin-top: 20px;

  .goods-article {
    margin-right: 20px;
    width: 940px;
  }

  .goods-aside {
    width: 280px;
    // min-height: 1000px;

    &.xtx-loading {
      background: #fff url(@/assets/images/loading.gif) no-repeat center;
    }
  }
}

.goods-tabs {
  min-height: 600px;
  background: #fff;

  &.xtx-loading {
    background: #fff url(@/assets/images/loading.gif) no-repeat center;
  }

  nav {
    display: flex;
    height: 70px;
    line-height: 70px;
    border-bottom: 1px solid #f5f5f5;

    a {
      position: relative;
      padding: 0 40px;
      font-size: 18px;
      cursor: pointer;

      &.active::before {
        content: '';
        position: absolute;
        left: 40px;
        bottom: -1px;
        width: 71px;
        height: 2px;
        background-color: @xtxColor;
      }

      > span {
        margin-left: 10px;
        font-size: 16px;
        color: @priceColor;
      }
    }
  }

  .goods-detail {
    padding: 40px;
    .attrs {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 30px;

      li {
        display: flex;
        margin-bottom: 10px;
        width: 50%;

        .dt {
          width: 100px;
          color: #999;
        }

        .dd {
          flex: 1;
          color: #666;
        }
      }
    }

    > img {
      width: 100%;
    }
  }
}

// 注意事项
.goods-warn {
  margin-top: 20px;
  min-height: 600px;
  background: #fff;

  h3 {
    margin-bottom: 10px;
    padding-left: 50px;
    height: 70px;
    font-size: 18px;
    font-weight: 400;
    line-height: 70px;
    border-bottom: 1px solid #f5f5f5;
  }

  p {
    padding: 0 25px;
    color: #666;
    line-height: 40px;
  }

  .tit {
    color: #333;
  }
}
</style>
